<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="number" v-model.number="num" />
      <span>{{msg}}</span>
      <hr />
      <input type="text" v-model="user.name" />
    </div>
    <script>
      // js数据类型  基础类型  复杂类型
      // 侦听器 watch，它可以用来观察指定【数据源(data/props)】的数据的变化，默认只能对基础类型进行观察
      // 侦听器里面的方法是不需要返回值的，而且还可以异步
      // 侦听器里面可以使用 this
      // 一个数据要是有副作用时，就可以用它
      const app = Vue.createApp({
        data() {
          return {
            num: 100,
            msg: '',
            user: { name: '', id: 1, age: 20 }
          }
        },
        // 侦听器
        watch: {
          // 方法名一定是数据源中存在的，它才能被观察到
          // 参数1：更新后的数据
          // 参数2：更新前的数据
          // num(newValue, oldValue) {
          //   console.log(newValue)
          //   // console.log(newValue,oldValue)
          //   if (newValue >= 103) this.msg = 'num值过大'
          // },
          num: {
            immediate: true,
            handler(value) {
              console.log(value)
              if (value >= 103) this.msg = 'num值过大'
            }
          },
          // 观察对象中的属性，而且它的属性值还一定要为一个基础类型
          'user.name'(value) {
            console.log(value)
          },
          // 观察 对象
          user: {
            // 深度监听，针对于监听的属性值为对象才用到，一般也不推荐，性能不优
            deep: true,
            // 默认初始化时是不执行的，只有观察的数据发生了改变才触发
            // 现在手动让开启初始化时就执行
            immediate: true,
            handler(newValue, oldValue) {
              console.log('newValue', newValue)
            }
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
